<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>路由规则管理</title>
    <link rel="stylesheet" href="./css/rules.css">
</head>

<body>
    <h1>路由规则管理</h1>
    <div class="input-container">
        <form onsubmit="return validForm(this)">   
            <label for="port-input">端口：</label>
            <input name="title" type="text" id="port-input" placeholder="请输入端口 (port)">
            <button class="add-rule-btn" id="add-rule-btn">新增规则</button>
            <label>状态</label>
            <input type="radio" name="flag" value="1">开启
            <input type="radio" name="flag" value="0" checked>关闭
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>规则描述</th>
                <th>是否开启</th>
                <th>添加时间</th>
                <th>最后变更时间</th>
                <th>功能列表</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <script>
        window.onload = function () {
            loaddata(); // 加载数据
        }
        function loaddata() {
            fetch("/cgi-bin/rules").then(resp => resp.json()).then(data => {
                // data的格式： {code: 0, datas: [{id: 1, title: "", flag: "0", add_time: "", "op_time":""}, {}...]}
                console.log(data);
                if (data.code == 0) {
                    data.datas.forEach(item => {
                        let tr = document.createElement("tr");
                        let td1 = document.createElement("td");
                        let td2 = document.createElement("td");
                        let td3 = document.createElement("td");
                        let td4 = document.createElement("td");
                        let td5 = document.createElement("td");
                        let td6 = document.createElement("td");

                        td1.innerText = item.id;
                        td2.innerText = item.title;
                        td3.innerText = item.flag == '1' ? "已开启" : "已关闭";
                        td4.innerText = item.add_time;
                        td5.innerText = item.op_time;

                        // 在td5中添加两个按钮（编辑、删除）
                        let opBtn = document.createElement("button");
                        let delBtn = document.createElement("button");
                        opBtn.innerText = item.flag == '1' ? "关闭" : "启动";
                        delBtn.innerText = "删除";

                        // 为两个按钮添加class类   button-container
                        opBtn.className = "btn  edit-btn"
                        delBtn.className = "btn delete-btn "

                        // 设置删除按钮的点击事件
                        delBtn.onclick = function () {
                            if (confirm("是否删除" + item.title + "?")) {                              
                                // [注意： boa只支持get和post请求，其它的暂不支持]
                                fetch("/cgi-bin/delrule?id=" + item.id).then(resp => resp.json()).then(data => {
                                    // data:  {code: 0, msg: "删除成功!"}   {code: 1, msg: "数据库连接失败!"}
                                    alert(data.msg);
                                    if (data.code == 0) {
                                        tbody.innerHTML = "";
                                        loaddata(); // 刷新数据
                                    }
                                })
                            }
                        }

                        // 设置操作按钮的点击事件
                        opBtn.onclick = function () {
                            if (confirm("是否" + opBtn.innerText + item.title + "?")) {
                                // [注意： boa只支持get和post请求，其它的暂不支持]
                                fetch("/cgi-bin/oprule?id=" + item.id + "&flag=" + (item.flag == '0' ? 1 : 0)).then(resp => resp.json()).then(data => {
                                    alert(data.msg);
                                    if (data.code == 0) {
                                        tbody.innerHTML = "";
                                        loaddata(); // 刷新数据
                                    }
                                })
                            }
                        }
                        td6.append(opBtn, delBtn);

                        tr.append(td1, td2, td3, td4, td5, td6);

                        tbody.append(tr);
                    });

                } else {
                    alert(data.msg);
                }
            })
        }
        function validForm(_form) {
            // 数据验证--自已完成
            let form_data = {
                title: _form.title.value,
                flag: _form.flag.value
            };
            // 新增
            fetch("/cgi-bin/rules",{
                    method: "POST",
                    body: JSON.stringify(form_data),
                    headers: {
                        "content-type": "application/json;charset=utf-8"
                    }
                })
            .then(resp => resp.json()).then(data => {
                if (data.code == 0) {
                    alert("新增成功");
                    tbody.innerHTML = ""; // 清空原数据
                    loaddata();
                    _form.reset(); // 清空表单数据
                }
            })
            return false;
        }
    </script>
</body>

</html>